<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>知云——针对编程的个性化学习推荐系统</title>
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
    <base href="${APP_PATH}">
    <link rel="shortcut icon" type="image/x-icon" href="${APP_PATH}/static/favicon.ico"/>
    <link rel="stylesheet" href="${APP_PATH}/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/toastr.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/offcanvas.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/fontawesome.min.css">



</head>
<body>
<jsp:include page="${APP_PATH}/common/head-blog.jsp"/>
<div class="col-sm-12 col-md-12 col-lg-9" style="margin-left: auto;margin-right: auto;">
    <div>
        <div class="my-3 p-4 rounded bg-white" style="position: relative;">
            <h4 class="border-bottom border-dark pb-2"><i class="fa fa-globe"></i>已关注领域</h4>
            <div style="position: absolute;right:24px; top:20px;">
                <a id="userAreaAdd" class="btn btn-sm btn-outline-secondary">添加领域</a>
                <a href="/blog-home" class="btn btn-sm btn-primary text-white">完成勾选</a>
            </div>
            <div id="starAreas"></div>
        </div>
    </div>
    <div id="addUserAreaDiv" class="my-3 p-4 rounded bg-white" style="display: none;">

    </div>
</div>
<div class="p-4"></div>
<script src="${APP_PATH}/static/js/jquery-3.3.1.min.js"></script>
<script src="${APP_PATH}/static/js/bootstrap.min.js"></script>
<script src="${APP_PATH}/static/js/toastr.min.js"></script>
<script src="${APP_PATH}/static/js/offcanvas.js"></script>

<script>
    $("#userAreaAdd").click(function () {
        $("#addUserAreaDiv").show();
    });

    function addStarArea(ele) {
        var areaId = $(ele).attr("data-areaId");
        var imgurl = $(ele).attr("data-imgurl");
        var areaname = $(ele).attr("data-areaname");
        var description = $(ele).attr("data-description");

        $.ajax({
            url:'/addStarArea/'+areaId,
            type:'GET',
            success:function (result) {
                if (result.code === 100) {
                    toastr.success("关注成功");
                    $("div[data-media-id=" + areaId + "]").remove();

                    var $div_media = $("<div data-media-id='"+areaId+"' style='cursor:hand;position:relative;' class='media text-muted pt-3 my-3'>");
                    var $img = $("<img src='"+imgurl+"' style='object-fit: cover' ta-holder-rendered='true' width='40px' height='40px'>");
                    var $p = $("<p class='media-body ml-3 pb-3 mb-0 small lh-125 border-bottom border-gray'>");
                    var $strong = $("<strong class='d-block'>"+areaname+"</strong>");
                    //删除按钮
                    var $btn_del = $("<a style='position:absolute;top:1px;right:8px;' data-areaId='"+areaId+"' data-imgurl='"+imgurl+"' data-areaname='"+areaname+"' data-description='"+description+"' onclick='unstarArea(this)' class='btn btn-sm btn-danger text-white'>取消关注</a>");
                    $div_media.append($btn_del);
                    $div_media.append($img).append($p.append($strong).append(description)).appendTo($("#starAreas"));
                }else{
                    toastr.error(result.extend.error);
                }
            }
        });
    }
    
    function unstarArea(ele) {
        var areaId = $(ele).attr("data-areaId");
        var imgurl = $(ele).attr("data-imgurl");
        var areaname = $(ele).attr("data-areaname");
        var description = $(ele).attr("data-description");

        $.ajax({
            url:'/unstarArea/'+areaId,
            type:'GET',
            success:function (result) {
                if (result.code === 100) {
                    toastr.success("取消关注成功");
                    $("div[data-media-id=" + areaId + "]").remove();

                    var $div_media = $("<div data-media-id='"+areaId+"' style='cursor:hand;position:relative;' class='media text-muted pt-3 my-3'>");
                    var $img = $("<img src='"+imgurl+"' style='object-fit: cover' ta-holder-rendered='true' width='40px' height='40px'>");
                    var $p = $("<p class='media-body ml-3 pb-3 mb-0 small lh-125 border-bottom border-gray'>");
                    var $strong = $("<strong class='d-block'>"+areaname+"</strong>");
                    //关注按钮
                    var $btn_del = $("<a style='position:absolute;top:1px;right:8px;' data-areaId='"+areaId+"' data-imgurl='"+imgurl+"' data-areaname='"+areaname+"' data-description='"+description+"' onclick='addStarArea(this)' class='btn btn-sm btn-primary text-white'>关注</a>");
                    $div_media.append($btn_del);
                    $div_media.append($img).append($p.append($strong).append(description)).appendTo($("#addUserAreaDiv"));
                }else{
                    toastr.error(result.extend.error);
                }
            }
        });
    }

    $(function () {
        //获取用户关注的领域
        $.ajax({
            url:'/getUserStarArea',
            type:'GET',
            success:function (result) {
                if (result.code === 100) {
                    var $starAreas = $("#starAreas");
                    $.each(result.extend.userAreas, function (index, item) {
                        var $div_media = $("<div data-media-id='"+item.area.id+"' style='cursor:hand;position:relative;' class='media text-muted pt-3 my-3'>");
                        var $img = $("<img src='"+item.area.imgurl+"' style='object-fit: cover' ta-holder-rendered='true' width='40px' height='40px'>");
                        var $p = $("<p class='media-body ml-3 pb-3 mb-0 small lh-125 border-bottom border-gray'>");
                        var $strong = $("<strong class='d-block'>"+item.area.areaname+"</strong>");
                        //删除按钮
                        var $btn_del = $("<a style='position:absolute;top:1px;right:8px;' data-areaId='"+item.areaid+"' data-imgurl='"+item.area.imgurl+"' data-areaname='"+item.area.areaname+"' data-description='"+item.area.description+"' onclick='unstarArea(this)' class='btn btn-sm btn-danger text-white'>取消关注</a>");
                        $div_media.append($btn_del);
                        $div_media.append($img).append($p.append($strong).append(item.area.description)).appendTo($starAreas);
                    });
                }else{
                    toastr.error(result.extend.error);
                }
            }
        });

        //获取用户未关注领域
        $.ajax({
            url:'/getAllUnstarArea',
            type:'GET',
            success:function (result) {
                if (result.code === 100) {
                    var $addUserAreaDiv = $("#addUserAreaDiv");
                    $.each(result.extend.unstarAreas, function (index, item) {
                        var $div_media = $("<div data-media-id='"+item.id+"' style='cursor:hand;position:relative;' class='media text-muted pt-3 my-3'>");
                        var $img = $("<img src='"+item.imgurl+"' style='object-fit: cover' ta-holder-rendered='true' width='40px' height='40px'>");
                        var $p = $("<p class='media-body ml-3 pb-3 mb-0 small lh-125 border-bottom border-gray'>");
                        var $strong = $("<strong class='d-block'>"+item.areaname+"</strong>");
                        //添加关注按钮
                        var $btn_del = $("<a style='position:absolute;top:1px;right:8px;' data-areaId='"+item.id+"'  data-imgurl='"+item.imgurl+"' data-areaname='"+item.areaname+"' data-description='"+item.description+"' onclick='addStarArea(this)' class='btn btn-sm btn-primary text-white'>关注</a>");
                        $div_media.append($btn_del);
                        $div_media.append($img).append($p.append($strong).append(item.description)).appendTo($addUserAreaDiv);
                    });
                }else{
                    toastr.error(result.extend.error);
                }
            }
        });
    });
</script>
</body>
</html>
